<template>
	<view>
		<cu-custom :isBack="true">
			<block #content>数据映射</block>
		</cu-custom>
		<view style="margin-top:220rpx;">
			<view class="text-bold text-title text-center">
				{{name}}
			</view>
			<view>
				<view class="flex justify-center align-center">
					<line-chart :dataList="dataList"  />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		hideLoading,
		showLoading,
		showToast
	} from '@/util/toast'
	import {
		formatDate
	} from '@/util/formatTime'
	import * as storage from '@/util/storage'
	import myConfig from '@/myConfig'
	import * as deviceApi from '@/api/dmIot/deviceApi.ts'
	import LineChart from '@/components/UniChars/LineChart'
	export default {
		name: 'explainData',
		data() {
			return {
				id:"",
				deviceId:"",
				name:"",
				dataList:{},
				startDate: "",
				endDate: "",
				startTimestamp: "",
				endTimestamp: "",
			}
		},
		components: {
			LineChart
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		onLoad(option) {
			// console.log("----------option")
			// console.log(option)
			this.id = option.id
			this.deviceId = option.deviceId
			this.name = option.name

			let timestamp = new Date().getTime() / 1000
			let startTimestamp = timestamp - 7 * 24 * 60 * 60
			let endTimestamp = timestamp
			let startDate = formatDate(startTimestamp)
			let endDate = formatDate(endTimestamp)
			this.startTimestamp = startTimestamp
			this.endTimestamp = endTimestamp
			this.startDate = startDate
			this.endDate = endDate
			this.init()
			// this.dataList = {
			// 	"xData": ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			// 	"yData": [150, 230, 224, 218, 135, 147, 260]
			// }
		},
		methods: {
			init() {
				this.getTrendData()
			},
			endDateChange(e) {
				this.explainWarn.dayEndTime = e.detail.value
			},
			startDateChange(e) {
				this.explainWarn.dayStartTime = e.detail.value
			},
			getTrendData() {
				showLoading(this.$t('loading'), false)
				let deviceId = this.deviceId
				let id = this.id
				let name = this.name
				let startDate = this.startDate
				let endDate = this.endDate
				// let chartParams = {
				// 	deviceId: "1743116199832612866",
				// 	endDate: `${endDate} 23:59:59`,
				// 	sensorId: "1743116292828721154",
				// 	startDate: `${startDate} 00:00:00`
				// }
				let chartParams = {
					deviceId,
					endDate: `${endDate} 23:59:59`,
					sensorId:id,
					startDate: `${startDate} 00:00:00`
				}
				deviceApi.getTrendData(chartParams).then(res => {
					let xData = [];
					let yData = [];
					if (res.length != 0) {
						for (var i = 0; i < res.length; i++) {
							let {
								createTime,
								displayValue
							} = res[i]
							xData.push(createTime)
							yData.push(displayValue)
						}
						this.dataList = {
							"xData": xData,
							"yData": yData
						}

						setTimeout(() => {
							uni.$emit('changeDataList')
						}, 1000)
					}
					hideLoading()
				})
			},
		},
	}
</script>

<style scoped>
	.text-title {
		color: #3f3f44;
	}
</style>
